
.clearfix::after{
  display: block;
  content: '';
  clear: both;
}

.main{
  width: 1200px;
  margin: 0 auto;

  .mian-nav {
    p {
      color: #969696;
      height: 66px;
      line-height: 70px;
      font-size: 16px;
      padding-left: 26px;
      background: url("../img/home.png") no-repeat 4px center;
      a {
        color: #969696;
        &:hover {
          color: red;
        }
      }
    }
  }

  .main-content {
    padding-left: 8px;
    padding-bottom: 55px;
    .content-left {
      width: 816px;
      float: left;
      background: #fff;
      height: 100%;
      .topic {
        height: 196px;
        .topic-show {
          float: left;
          width:522px;
          height: 100%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            transition: all 0.5s ease;
            &:hover {
              transform:scale(1.2);
            }
          }
        }
        .introduce {
          float: left;

          height: calc(100% - 22px);
          padding-left: 8px;
          padding-top: 22px;

          h5 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 20px;
            line-height: 50px;
            font-weight: 700;
            a:hover {
              text-decoration: underline;
              color: #ff9500;
            }
          }
          .activity-time {
            height: 36px;
            line-height: 36px;
            font-size: 16px;
            color: #a2a2a2;
            em {
              color: #ff4200;
            }
          }
          .joinBtn {
            padding-top: 10px;
            position: relative;
            span, a {
              float:left;
              width: 116px;
              line-height: 34px;
              border: 1px solid #ff9500;
              text-align: center;
              margin-right: 12px;
              font-size: 14px;
              cursor: pointer;
              color: #ff9500;
              &:hover {
                border-color: #ff9500;
                background: #ff9500;
                color: #fff;
              }
            }
            span {
              border: 1px solid #e0e0e0;
              color: #717171;
            }
            img {
              width: 141px;
              height: 142px;
              background: url("../img/code_bg.png") no-repeat;
              padding: 7px 7px 7px 12px;
              position: absolute;
              right: -140px;
              bottom: 0;
              z-index: 100;
            }
          }
        }
      }
      .aboutActivity {
        margin-top: 26px;
        .top-bar {
          border-bottom: 3px solid #ff8900;
          font-size: 0;
          .switchBtn {
            display: inline-block;
            background: none;
            cursor: pointer;
            .front-icon {
              display: block;
              border-radius: 8px;
              line-height: 40px;
              text-align: center;
              width: 135px;
              font-size: 18px;
              color: #000;
              background: #fff;
            }
            span {
              display: block;
              margin: 0 auto;
              width:0 ;
              height: 0;
              border: {
                width: 6px 4px;
                color: transparent;
                style: solid dotted dotted dotted;
              }
            }
          }
          .active {
            .front-icon {
              background: #ff9500;
              color: #fff;
            }
            span {
              border-color: #ff9500 transparent transparent transparent;
            }
          }

          .mid-border {
            display: inline-block;
            width: 1px;
            height: 15px;
            background: #cac8d5;
            margin: 14px 21px 0 36px;
          }
        }
        .article-box{
          .article {
            padding-left: 42px;
            border-bottom: 1px dotted #ccc;
            h5 {
              line-height: 98px;
              text-align: center;
              font-size: 14px;
              font-weight: bold;
              a {
                color: #e56600;
                &:hover {
                  text-decoration: underline;
                }
              }
            }
            .guidance {
              padding-bottom: 66px;
              line-height: 25px;
              font-size: 14px;
              strong {
                font-weight: bold;
              }
              span {
                color:#E53333;
              }
              table {
                td {
                  border: 1px solid #000;
                }
              }
            }
          }
          .bottom-join {
            width: 100%;
            a {
              display: block;
              margin: 20px auto 0;
              width: 116px;
              line-height: 34px;
              border: 1px solid #ff9500;
              text-align: center;
              font-size: 14px;
              cursor: pointer;
              color: #ff9500;
              &:hover {
                background: #ff9500;
                color: #fff;
              }
            }
          }
        }

        .comment {
          .comment-title {
            line-height: 55px;
            font-size: 24px;
            p {
              float:left;
              span {
                margin-left: 10px;
                float:right;
                font-size: 14px;
                em {
                  color: #ff0000;
                }
              }
            }

          }
          .comment-box {
            font-size: 14px;
            border: 1px solid #ccc;
            textarea {
              display: block;
              padding: 10px;
              width: calc( 100% - 20px);
              resize: vertical;
              min-height: 150px;
              border: none;
              line-height: 25px;
            }
            .comment-bar {
              border-top: 1px solid #ccc;
              height: 35px;
              line-height: 35px;
              position: relative;
              .face-show {
                float: left;
                margin-left: 16px;
                padding-left: 20px;
                background: url("../img/comment_bg.png") no-repeat 0 center;
                cursor: pointer;
              }
              input {
                float: right;
                border: none;
                outline: none;
                background: #ff6c45;
                padding: 0 16px;
                line-height: 35px;
                color: #fff;
                cursor: pointer;
              }
              #face-box {
                position: absolute;
                left: -1px !important;
                top: 35px !important;
                z-index: 100;
                border: 1px solid #ccc;
                padding: 2px;
                background: #fff;
                table {
                  td {
                    padding: 0;
                    img {
                      cursor:pointer;border:1px #fff solid;
                      &:hover {
                        border:1px #0066cc solid;
                      }
                    }
                  }
                }
              }
            }
          }
          .upload-img {
            p {
              margin-left: 6px;
              padding-left: 16px;
              line-height: 30px;
              font-size: 12px;
              color: #3e6098;
              background: url("../img/upload-cion.png") no-repeat 0 center;
              background-size: 14px;
              span {
                color: #666666;
                margin-right: 10px;
              }
            }
            ul {
              padding: 10px 0 ;
              li {
                box-sizing: border-box;
                position:relative;
                float:left;
                width: 84px;
                height:84px;
                margin-right: 10px;
                img {
                  width: 100%;
                  height: 100%;
                }
                span {
                  position: absolute;
                  top: -6px;
                  left: -6px;
                  width:20px;
                  height: 20px;
                  background: url("../img/close-icon.png") no-repeat;
                }
                input {
                  display: block;
                  width: 100%;
                  height: 100%;
                  opacity: 0;
                  filter: opacity(0);
                  cursor: pointer;
                }

              }
              .uploadBtn {
                border: 1px solid #ccc;
                background: url("../img/add-icon.jpg") no-repeat center;
              }
            }
          }
          .login-box {
            height: 36px;
            a {
              float: left;
              padding: 0 8px;
              line-height: 18px;
              font-size: 14px;
              margin: 9px 0;
              color: #0060ff;
              &:hover {
                text-decoration: underline;
              }
              & + a {
                border-left: 1px solid #0060ff;
              }
            }

          }
          .comment-list {
            .list-title {
              margin-top: 20px;
              border-top: 1px solid #d0d0d0;
              padding: 10px 0;
              line-height: 26px;
              font-size: 16px;
              font-weight: bold;
              color: #5a5a5a;
            }
            .more {
              text-align: center;
              background: #f2f9ff;
              border: 1px solid #dbeaff;
              color: #3b8eff;
              cursor: pointer;
              font-size: 16px;
              height: 38px;
              line-height: 38px;
              margin-top: 10px;
            }
            ul {
              width: 100%;
              li {
                width: 90%;
                padding-left: 10%;
                margin-top: 10px;
                position:relative;
                line-height: 30px;
                font-size: 14px;
                border-bottom: 1px dashed #dfdfdf;
                .user-head {
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 64px;
                  height: 64px;
                  border-radius: 32px;
                }
                .comment-info {
                  text-align: right;
                  color: #bfbfbf;
                  strong {
                    float:left;
                    font-weight: bold;
                    color: #3b8eff;
                    margin-right: 20px;
                  }
                  span {
                    float:left;
                    color: #6f6f6f;
                  }
                }
                .conmment-content {
                  padding: 6px 0;
                  line-hright: 26px;
                }
                .user-upload {
                  text-align: center;
                  font-size: 0;
                  img{
                    box-sizing: border-box;
                    padding: 0 10px;
                    max-width: 50%;
                  }
                }
                .reply {
                  padding-top: 30px;
                  dl {
                    margin-left: 20%;
                    dd {
                      padding: 10px 0 10px 12%;
                      border: 1px solid #e2e2e2;
                      position:relative;
                      background: #fcfcfc;
                      .user-head {
                        width: 52px;
                        height: 52px;
                        border-radius: 27px;
                        margin: 15px 0 0 10px;
                      }
                      .reply-info {
                        strong {
                          font-weight: bold;
                          color: #808080;
                          float:left;
                          margin-right: 20px;
                        }
                        span {
                          float:left;
                          color: #6f6f6f;
                        }
                      }
                      .reply-content {
                        line-height: 26px;
                        padding: 6px;
                        padding-left: 0;
                        color: #999999;
                      }
                      .tri {
                        display: block;
                        position: absolute;
                        width: 11px;
                        height: 6px;
                        background: url("../img/comment-top-arrow.png") no-repeat;
                        top: -6px;
                        left: 110px;
                      }
                      & + dd {
                        margin-top: 20px;
                      }

                    }

                  }
                  .reply-bar {
                    line-height: 14px;
                    margin: 16px 0;
                    span {
                      float: right;
                      padding: 0 10px;
                      color: #282828;
                      cursor: pointer;
                      em {
                        color: #f00;
                      }
                      & + span {
                        border-right: 1px solid #282828;
                        color: #f00;

                      }
                    }
                  }
                  .reply-box {
                    position: relative;
                    textarea {
                      float: right;
                      display: block;
                      box-sizing: border-box;
                      border-color: #d7d5d5;
                      padding: 10px;
                      line-height: 26px;
                      width: 80%;
                      margin-left: 20%;
                      resize: vertical;
                      min-height: 100px;
                    }
                    input {
                      float:right;
                      border: none;
                      color: #fff;
                      font-size: 14px;
                      width: 90px;
                      line-height: 35px;
                      text-align: center;
                      background: #e54c3d;
                      cursor: pointer;
                      margin: 15px 0 10px 0;
                    }
                    span {
                      display: block;
                      position: absolute;
                      width: 11px;
                      height: 6px;
                      background: url("../img/comment-top-arrow.png") no-repeat 0 -6px;
                      top: -5px;
                      right: 110px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .aside {
      float: right;
      width: 350px;
      background: #fff;
      height: 100%;
      .title {
        padding-top: 6px;
        height: 50px;
        line-height: 50px;
        padding-left: 42px;
        font-size: 26px;
        color: #676767;
        border-bottom: 3px solid #ff9500;
        a {
          float: right;
          font-size: 12px;
          margin-right:8px;
          cursor: pointer;
          &:hover {
            color: red;
          }
        }
      }
      .hot-topic {
        height: 1022px;
        padding-left: 18px;
        border-radius: 8px;
        box-shadow: 0 0 2px 1px #f6f6f6;
        .title{
          background: url("../img/topic.png") no-repeat 0 14px;
        }
        .item {
          position: relative;
          margin-right: 20px;
          .item-show {
            display:block;
            margin-top: 12px;
            overflow: hidden;
            img {
              width: 312px;
              height: 146px;
              transition: all 0.5s ease;
            }
          }
          p {
            width: 100%;
            position: absolute;
            font-size: 14px;
            color: #fff;
            bottom: 0;
            line-height: 50px;
            height: 50px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            z-index: 99;
            background: url("../img/opacity.png");
            cursor: pointer;
          }
        }
      }
      .hot-game {
        margin-top: 10px;
        height: 530px;
        padding-left: 18px;
        border-radius: 8px;
        box-shadow: 0 0 2px 1px #f6f6f6;
        .title {
          background: url("../img/game-hot.png") no-repeat 0 14px;
        }
        dd {
          padding-top: 8px;
          .left {
            float: left;
            display: none;
            .hover-img {
              display:block;
              img{
                width: 76px;
                height: 76px;
              }
            }
          }
          .right{
            width: 100%;
            float: left;
            span {
              display: block;
              overflow: hidden;
              white-space: nowrap;
            }
            .game-name {
              float: left;
              width: 60%;
              padding-left: 18px;
              background: url("../img/li.png") no-repeat 2px center;
              line-height: 32px;
              font-size: 16px;
              a {
                color: #333;
              }

            }
            .game-type {
              float: right;
              width: 20%;
              text-align: center;
              line-height: 32px;
              font-size: 14px;
              a {
                color: #b2b2b2;
              }
            }
            .game-heat {
              display: none;
              font-size: 14px;
              color: #b2b2b2;
              em {
                color: #ff0000;
              }
            }
          }
        }
        .hover {
          padding-bottom: 8px;
          border-bottom: 1px dashed #e8e8e8;
          .left {
            display: block;
          }
          .right{
            width: 60%;
            padding-left: 14px;
            .game-name {
              float: none;
              width: 100%;
              padding: 0;
              background: none;
              font-weight: bold;
            }
            .game-type {
              float: none;
              width: 100%;
              text-align: left;
              line-height: 22px;
            }
            .game-heat {
              display: block;
              line-height: 22px;
            }
          }
        }
      }
    }
  }
}
